<template>
  <div id="home">
    <div class="NavBar">
      <van-nav-bar title="全部书评" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="bookinfo">
      <div class="book">
        <img
          style="
            width: 85px;
            height: 123px;
            box-shadow: 2px 2px 5px rgb(151, 150, 150);
          "
          :src="bookInfo.pic"
        />
        <div class="book-right">
          <span style="font-weight: bold">{{ bookInfo.bookname }}</span>
          <span style="margin-top: 14px; color: rgb(189, 184, 184)">{{
            bookInfo.author
          }}</span>
        </div>
      </div>
    </div>
    <!--评论区-->
    <div class="comment">
      <div class="com-header">
        <span style="font-weight: bolder">书友热评</span>
      </div>
      <div
        v-if="comments.length == 0"
        style="font-size: 14px; padding-top: 24px"
      >
        书籍暂无评论
      </div>
      <div
        v-else
        class="com-conten"
        v-for="(item, index) in comments"
        :key="index"
      >
        <div class="com-user">
          <van-image
            round
            width="30px"
            height="30px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="nik-time">
            <span
              style="
                margin-left: 10px;
                color: rgb(206, 206, 206);
                font-size: 13px;
              "
              >{{ item.username }}</span
            >
            <span style="color: rgb(206, 206, 206); font-size: 13px">{{
              item.created | dateFormat
            }}</span>
          </div>
        </div>
        <div class="content">
          <span style="font-size: 13px; margin-top: 10px">{{
            item.content
          }}</span>
        </div>
      </div>
    </div>
    <!--发表评论-->
    <div class="comment-settion">
      <div class="push">
        <van-image
          round
          width="30px"
          height="30px"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <span
          @click="show = true"
          style="margin-left: 14px; color: rgb(179, 179, 179)"
          >我来评论</span
        >
      </div>
    </div>
    <van-action-sheet v-model="show"  :round="false">
      <div style="height: 120px; width: 100%">
        <van-field
          v-model="content"
          center
          autosize
          rows="1"
          type="textarea"
          placeholder="留下你的精彩评论"
        >
          <template #button>
            <van-button size="small" type="primary" @click="push"
              >发表</van-button
            >
          </template>
        </van-field>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import bookrequst from "@/api/book";
import commrequst from "@/api/comment";
import {
  NavBar,
  Divider,
  Image as VanImage,
  ActionSheet,
  Field,
  Button,
  Notify,
} from "vant";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Divider.name]: Divider,
    [VanImage.name]: VanImage,
    [ActionSheet.name]: ActionSheet,
    [Field.name]: Field,
    [Button.name]: Button,
    [Notify.name]: Notify,
  },
  data() {
    return {
      bookId: this.$route.query.bookId,
      bookInfo: "",
      comments: [],
      show: false, //是否显示发表弹窗
      content: "",
    };
  },
  created() {
    this.getBookInfo();
    this.getCommentList();
  },
  methods: {
    onClickLeft() {
      if (window.history.length <= 1) {
        this.$router.push("/");
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    getBookInfo() {
      bookrequst.bookInfo(this.bookId).then((res) => {
        this.bookInfo = res.data.data;
      });
    },
    getCommentList() {
      commrequst.commentList(this.bookId).then((res) => {
        this.comments = res.data.data;
      });
    },
    //发表评论
    push() {
      commrequst
        .pushComment(this.bookId, this.content)
        .then((res) => {
          this.getCommentList(); //更新数据
          Notify({ type: "success", message: "发表成功" });
        })
        .catch((err) => {
          Notify({ type: "warning", message: "发表失败" });
        });
    },
  },
  filters: {
    dateFormat(dateStr) {
      var dt = new Date(dateStr);
      var y = dt.getFullYear();
      var m = dt.getMonth() + 1;
      var d = dt.getDate();
      return `${y}-${m}-${d}`;
    },
  },
};
</script>

<style scoped>
#home {
  height: 100%;
  width: 100%;
  background: rgb(248, 248, 248);
  position: absolute;
}
.book {
  display: flex;
  padding: 16px;
  background: white;
}
.book-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: center;
  justify-content: center;
  margin-left: 16px;
}
.comment {
  margin-top: 14px;
  padding: 16px;
  background: white;
  margin-bottom: 70px;
}
.com-header {
  display: flex;
  justify-content: space-between;
}
.com-user {
  display: flex;
  align-items: center;
}
.com-conten {
  margin-top: 14px;
  margin-bottom: 14px;
}
.nik-time {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.content {
  display: flex;
  justify-self: start;
  padding-left: 36px;
}
.comment-settion {
  height: 70px;
  width: 100%;
  position: fixed;
  bottom: 0;
  background: white;
  border-top: solid rgb(230, 230, 230);
}
.push {
  margin-left: 14px;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>